<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <!-- CRUD 组件 -->
    <ma-crud :options="crud" :columns="columns" ref="crudRef">

      <!-- 排序列 -->
      <template #sort="{ record }">
        <a-input-number :default-value="record.sort" mode="button" @change="changeSort($event, record.id)" :min="0"
                        :max="1000"/>
      </template>
      <!-- 图标列 -->
      <template #cover="{ record }">
        <a-image width="100" :src="record.cover"/>
      </template>
      <!-- 状态列 -->
      <template #status="{ record }">
        <a-switch :checked-value="1" unchecked-value="2" @change="changeStatus($event, record.id)"
                  :default-checked="record.status == 1"/>
      </template>
    </ma-crud>
  </div>
</template>

<script setup>
import {ref, reactive} from 'vue'
import ad from '@/api/cms/ad'
import {Message} from '@arco-design/web-vue'

const crudRef = ref()

const changeStatus = async (status, id) => {
  const response = await ad.changeStatus({id, status})
  if (response.success) {
    Message.success(response.message)
  }
}

const changeSort = async (value, id) => {
  const response = await ad.numberOperation({id, numberName: 'sort', numberValue: value})
  if (response.success) {
    Message.success(response.message)
  }
}

const crud = reactive({
  api: ad.getList,
  recycleApi: ad.getRecycleList,
  showIndex: false,
  pageLayout: 'fixed',
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationWidth: 200,
  add: {show: true, api: ad.save,},
  edit: {show: true, api: ad.update,},
  delete: {
    show: true,
    api: ad.deletes,
    realApi: ad.realDeletes
  },
  recovery: {show: true, api: ad.recoverys,},
  formOption: {viewType: 'drawer', width: 600}
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50},
  {
    title: '广告名称',
    dataIndex: 'name',
    search: true,
    commonRules: [{required: true, message: '广告名称必填'}],
    width: 100
  },
  {
    title: '调用代码',
    dataIndex: 'code',
    width: 100
  },
  {
    title: "数据类型",
    dataIndex: "object_type",
    formType: "select",
    search: true,
    multiple: false,
    addDefaultValue: "1",
    dict: {
      data: [
        {
          label: "链接",
          value: "1"
        },
        {
          label: "视频",
          value: "2"
        },
        {
          label: "分享",
          value: "3"
        },
        {
          label: "文章",
          value: "4"
        }
      ],
      translation: true
    },
    cascaderItem: ['object_id'],
    onControl: (val, maFormObject) => {
            const service = maFormObject.getColumnService()
            if (val == 4) {
                service.get('object_id').setAttr('display', true)
            }else{
                service.get('object_id').setAttr('display', false)
            }
        }
  },
  {
    title: '占位封面',
    dataIndex: 'cover',
    formType: "upload",
    type: "image",
    commonRules: [{required: true, message: '请输入'}],
    width: 100
  },
  {title: '排序', dataIndex: 'sort', formType: 'input-number', addDefaultValue: 100, width: 180, min: 0, max: 1000},
  {
    title: '关联数据',
    dataIndex: 'object_id',
    commonRules: [{required: true, message: '请输入'}],
    hide: true,
    formType: 'select',
    dict: {url: 'cms/adc/article'},
  },
  {title: '标题', dataIndex: 'title',  hide: true},
  {
    title: '图片',
    dataIndex: 'image',
    formType: "upload",
    type: "image",
    width: 120,
    hide: true
  },
  {title: '描述', dataIndex: 'desc', hide: true},
  {title: '链接地址', dataIndex: 'url', hide: true},
  {
    title: '状态', dataIndex: 'status', formType: 'radio', width: 120,
    dict: {
      data: [{label: '正常', value: '1'}, {label: '停用', value: '2'}],
      translation: true
    },
    addDefaultValue: '1',
  },
  {title: '内容', dataIndex: 'content', formType: 'textarea', hide: true},
  {title: '创建时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false, width: 180,},
])
</script>

<script>
export default {name: 'cms:ad'}
</script>

<style scoped>
.icon {
  width: 1em;
}
</style>
  